<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Code Quality Checker</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul,
			ol {
				list-style: none;
			}
			.header {
				padding: 0 10%;
				height: 254px;
				background-color: #55aa68;
				display: flex;
				flex-direction: column;
			}
			.nav {
				margin-top: 31px;
				font-size: 14px;
				text-align: right;
			}
			.nav a {color: #fff; padding: 0 8px;}

			.hd-title {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			.hd-title-txt {
				font-size: 50px;
				color: #fff;
				padding: 20px 0;
				margin-top: 20px;
			}
			.hd-title-remark {
				font-size: 18px;
				color: rgb(247, 247, 247);
			}

			.mbox {
				margin: 20px 10% 0 10%;
				padding-bottom: 20px;
			}

			.statement {
				display: flex;
				flex-direction: row;
			}
			.sm-area {
				flex: 0 1 auto;
				width: 50%;
			}
			.total-table {
				margin: 20px 0;
			}
			.total-table-sty {
				width: 100%;
				border: 1px solid rgb(206, 206, 206);
			}
			.total-table-sty thead {
				background-color: rgb(206, 206, 206);
				line-height: 30px;
			}
			.total-table-sty td {
				text-indent: 10px;
				font-size: 14px;
				width: 25%;
			}
			.file-lst {
				font-size: 24px;
				border-bottom: 1px solid rgb(192, 192, 192);
				color: rgb(192, 192, 192);
				margin-bottom: 20px;
				padding: 10px 0;
			}

			.fl-item-ul {
				width: 100%;
				font-weight: normal;
				border-radius: 5px;
				border: 1px solid #ddd;
				border-spacing: 0px;
			}
      .fl-item-li{
				background-color: #f6dddd;
        height: 38px;
				line-height: 38px;
        color: #c63e3e;
        text-indent: 0.8em;
      }
			.li-gbgc{
				background-color: rgb(208, 234, 201);
				color: #289431;
			}
			.fil-span{
				font-weight: bold;
				float: right;
				margin-right: 12px;
			}
      .fl-table{border-collapse: collapse; width: 100%;}
      .fl-table tr{border-bottom: 1px dashed #ddd;}
      .fl-table tr:last-child{border-bottom-width: 0;}

			.fl-table td {
				font-size: medium;
				cursor: pointer;
				text-align: center;
        padding: 4px 0;
			}
			.fl-table td:nth-child(1) {
				width: 80px;
			}
			.fl-table td:nth-child(2) {
				width: 110px;
        font-weight: bold;
        color: #c63e3e;
			}
			.fl-table td:nth-child(3) {
				text-align: left;
			}
			.fl-table td:nth-child(4) {
				width: 240px;
			}
			.fl-table td.c-warning {
				color: #f9ae2d
			}


			.top {
				width: 40px;
				height: 40px;
				background-color: rgba(51, 51, 51, 0.8);
				color: #fff;
				position: fixed;
				right: 10px;
				bottom: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.top::before {
				display: inline-block;
				border-top: 2px solid;
				border-right: 2px solid;
				width: 10px;
				height: 10px;
				border-color: #fff;
				transform: rotate(-45deg);
				margin-top: 5px;
				content: ' ';
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<span><a href="./index.html">重复率</a></span>
				<span><a href="./eslint.html">Eslint</a></span>
				<span><a href="./sloc.html">注解率及行数</a></span>
			</div>
			<div class="hd-title">
				<div class="hd-title-txt">Code Quality Checker</div>
				<div class="hd-title-remark">javascript代码检测工具</div>
			</div>
		</div>

		<div class="mbox">
			<aside class="statement">
				<div id="sm-area-1" style="width: 100%; height: 300px;"></div>
				<script type="text/javascript">
					(function () {
						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('sm-area-1'));

						// 指定图表的配置项和数据
						var option = {
							title: {
								text: 'Eslint',
							},
							yAxis: [
								{
									type: 'category',
									data: ['problems', 'errors', 'warnings', 'complexity'],
								},
							],
							xAxis: [
								{
									type: 'value',
								},
							],
							series: [
								{
									// name: 'Acutal',
									type: 'bar',
									stack: 'sum',
									barCategoryGap: '32%',
									itemStyle: {
										normal: {
											color: 'tomato',
											barBorderColor: 'tomato',
											barBorderWidth: 6,
											barBorderRadius: 0,
											label: {
												show: true,
											},
										},
									},
									textStyle: {
										fontSize: '18px',
									},
									data: [
										<%=oStatistics['errorCount']+oStatistics['warningCount']%>,
										<%=oStatistics['errorCount']%>,
										<%=oStatistics['warningCount']%>,
										<%=oStatistics['complexity']%>
									],
								},
							],
						};

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					})();
				</script>
			</aside>

			<article>
				<div class="file-lst">Capture</div>

				<div class="fl-item-lst">
          <ul class="fl-item-ul">
						
						<% aCheckedLst.forEach(function(oItem){ %>
						<% if(oItem && oItem['messages']){ %>
            <li class="fl-item-li<% if(oItem['messages'].length === 0 ){%> li-gbgc<%}%>">
              [<span>+</span>]
              <%=oItem['filePath'] && oItem['filePath'].replace(sRootPath, "")%>
              <span class="fil-span"><%=oItem['messages'].length%> problem (<%=oItem['errorCount']%> error, <%=oItem['warningCount']%> warnings)</span>
						</li>
						<% if(oItem['messages'].length){%>
            <li>
              <table class="fl-table">
								<% oItem['messages'].forEach(function(oItem2){ %>
                <tr class="f-43">
                  <td><%=oItem2['line']%>:<%=oItem2['column']%></td>
                  <td<% if(oItem2['severity'] === 1){ %> class="c-warning"<% } %>><% if(oItem2['severity'] === 2){ %>Error<% } else { %>Warning<% } %></td>
                  <td><%=oItem2['message']%></td>
                  <td><%=oItem2['ruleId']%></td>
                </tr>
								<% }); %>
              </table>              
						</li>
						<% } %>
						<% } %>
						<% }); %>
						

          </ul>


				</div>
			</article>
		</div>
		<div class="top" id="top" onclick="document.body.scrollTop = document.documentElement.scrollTop=0"></div>
	</body>
</html>
